<template>
  <div>
    <div>
      <div class="card-group mb-3">
        <div v-for="(item, key) in task" class="card card-hover" :key="key">
          <div class="card-body p-3">
            <router-link class="task-title" :to="item.url">
              <span>
                <i :class="item.icon"></i>
                {{ item.title }}
              </span>
            </router-link>
            <div class="text-muted my-2 text-right border-bottom">
              <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
                {{ subItem.prefix }}
                <span :class="subItem.css || ''">{{ subItem.num }}</span>
              </div>
            </div>
            <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
              <router-link :to="list.url || ''">
                <div class="d-flex">
                  <small
                    :class="[
                      isCurrentRouter(list) ? 'text-primary font-weight-bold' : 'text-muted',
                    ]"
                  >
                    <div class="mr-3">{{ list.title }}</div>
                  </small>
                  <small
                    :class="[
                      isCurrentRouter(list) ? 'text-primary font-weight-bold' : 'text-muted',
                    ]"
                    class="flex-1"
                  >
                    <div class="d-flex justify-content-between">
                      <div>{{ list.total }}</div>
                      <div>{{ list.num }}(万元)</div>
                    </div>
                  </small>
                </div>
                <div class="progress-bar">
                  <div
                    class="progress-bar-full"
                    :class="`bg-${list.bgColor}`"
                    :style="{ width: `${list.percent}%` }"
                  ></div>
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      task: {
        recomment: {
          title: '项目推荐',
          icon: 'fa fa-paper-plane-o fa-fw',
          url: { name: 'missionRecomment', query: { status: 0 } },
          subTitle: [{ prefix: '建档项目：', num: 0, css: 'font-weight-bold text-primary' }],
          list: [
            {
              title: '未推荐',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'missionRecomment', query: { status: 0 } },
            },
            {
              title: '已推荐',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'missionRecomment', query: { status: 1 } },
            },
            {
              title: '已拒绝',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'missionRecomment', query: { status: 2 } },
            },
          ],
        },
        progress: {
          title: '项目进度',
          icon: 'fa fa-hourglass-half fa-fw',
          url: { name: 'missionNclaim', query: { status: 0 } },
          subTitle: [{ prefix: '推荐项目：', num: 0, css: 'font-weight-bold text-primary' }],
          list: [
            {
              title: '待受理',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'missionNclaim', query: { status: 0 } },
            },
            {
              title: '已受理',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'success',
              url: { name: 'missionYclaim', query: { status: 1 } },
            },
            {
              title: '已放款',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'primary',
              url: { name: 'missionYfunds', query: { status: 2 } },
            },
            {
              title: '已拒绝',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'missionNfunds', query: { status: 2 } },
            },
          ],
        },
        postloan: {
          title: '贷后管理',
          icon: 'fa fa-calendar fa-fw',
          url: { name: 'missionNormal', query: { status: 1 } },
          subTitle: [{ prefix: '放款项目：', num: 0, css: 'font-weight-bold text-primary' }],
          list: [
            {
              title: '在保项目',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'info',
              url: { name: 'missionNormal', query: { status: 1 } },
            },
            {
              title: '解保项目',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'primary',
              url: { name: 'missionNormal', query: { status: 6 } },
            },
            {
              title: '异常项目',
              total: 0,
              num: 0,
              percent: 0,
              bgColor: 'danger',
              url: { name: 'missionNormal', query: { status: 2 } },
            },
          ],
        },
      },
    }
  },
  computed: {
    routeStatus() {
      const status = this.$route.query.status
      return status === undefined ? '' : status
    },
    routeNameStatus() {
      return this.$route.name + this.routeStatus
    },
    taskCountGov() {
      return this.$store.getters.taskCountGov
    },
  },
  watch: {
    taskCountGov: {
      handler: function () {
        this.getTaskCountGov()
      },
      deep: true,
    },
  },
  mounted() {},
  created() {
    this.getTaskCountGov()
    this.initTask()
    this.$store.dispatch('getTaskCountGov')
  },
  methods: {
    getTaskCountGov() {
      if (!this.taskCountGov.user_id) {
        return
      }
      // credit_my_task_list_gov_view
      // recommend开头的是推荐模块
      //  claim开头的是受理模块
      // load_beh开头的是贷后
      // load是放款模块
      // 项目推荐
      let dataCount = this.getNumAndPercent(
        this.taskCountGov.recommend_no_total,
        this.taskCountGov.recommend_yes_total,
        this.taskCountGov.recommend_confuse_total
      )
      this.task.recomment.subTitle[0].num = dataCount.sum
      this.task.recomment.list[0].num = this.getNumber(this.taskCountGov.recommend_no_funds) // 我审
      this.task.recomment.list[1].num = this.getNumber(this.taskCountGov.recommend_yes_funds) // 未审
      this.task.recomment.list[2].num = this.getNumber(this.taskCountGov.recommend_confuse_funds) // 未审
      this.task.progress.subTitle[0].num = dataCount.data[1].count
      this.setNumAndPercent('recomment', dataCount.data)
      // 项目进度 progress
      dataCount = this.getNumAndPercent(
        this.taskCountGov.claim_no_total,
        this.taskCountGov.claim_yes_total,
        this.taskCountGov.load_yes_total,
        this.taskCountGov.load_confuse_total
      )

      this.task.progress.list[0].num = this.getNumber(this.taskCountGov.claim_no_funds)
      this.task.progress.list[1].num = this.getNumber(this.taskCountGov.claim_yes_funds)
      this.task.progress.list[2].num = this.getNumber(this.taskCountGov.load_yes_funds)
      this.task.progress.list[3].num = this.getNumber(this.taskCountGov.load_confuse_funds)
      this.task.postloan.subTitle[0].num = dataCount.data[2].count
      this.setNumAndPercent('progress', dataCount.data)
      // 贷后管理 postloan
      dataCount = this.getNumAndPercent(
        this.taskCountGov.load_beh_norl_total,
        this.taskCountGov.load_beh_finish_total,
        this.taskCountGov.load_beh_exc_total
      )
      this.task.postloan.list[0].num = this.getNumber(this.taskCountGov.load_beh_norl_funds)
      this.task.postloan.list[1].num = this.getNumber(this.taskCountGov.load_beh_finish_funds)
      this.task.postloan.list[2].num = this.getNumber(this.taskCountGov.load_beh_exc_funds)
      this.setNumAndPercent('postloan', dataCount.data)
    },
    getNumber(str) {
      return +str || 0
    },

    getPercent(top, bottom) {
      return !bottom ? 0 : (top / bottom) * 100
    },

    getNumAndPercent(...args) {
      const countArr = []
      let sum = 0
      for (let arg of args) {
        const count = this.getNumber(arg)
        sum += count
        countArr.push(count)
      }

      const data = []
      for (let i = 0; i < countArr.length; i++) {
        const count = countArr[i]
        data.push({
          count,
          percent: this.getPercent(count, sum),
        })
      }

      return { sum, data }
    },
    setNumAndPercent(key, data) {
      for (let i = 0; i < data.length; i++) {
        const item = this.task[key].list[i]
        item.total = data[i].count
        item.percent = data[i].percent
      }
    },
    async initTask() {
      let redirect = ''
      const route = this.$route
      const keys = Object.keys(this.task)
      keys.forEach(key => {
        const item = this.task[key]
        // 第一次进入我的任务，自动进入第一个任务
        if (!redirect) {
          redirect = item.url
        }
      })
      if (route.name !== 'missionHome') {
        // 刷新
        redirect = { ...route }
      } else {
        // 查看详情后返回时，进入当前任务
        const r = sessionStorage.getItem('credit_gov_router')
        if (r) {
          redirect = { name: `mission${r.substring(0, 1).toUpperCase()}${r.substring(1)}` }
        }
      }
      this.$router.replace(redirect)
    },
    isCurrentRouter(item) {
      return !(!item.url || this.routeNameStatus !== `${item.url.name}${item.url.query.status}`)
    },
  },
}
</script>
<style lang="scss" scoped>
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;

  &:hover {
    border-color: lighten($primary, 35%);
    border-color: var(--primary-light-9);
    box-shadow: 0 2px 6px $gray-400;
  }
}

.bg-ondine {
  background-color: #40e0d0;
}
</style>
